<template>
	<view class="content fofa">
		<tabnav :col="back"></tabnav>
		<view class="wid100 dis disAl" style="height: 180rpx;" :style="{'background-color':back}">
			<view class="wid90 mar dis disAl disJuB ">
				<view style="width: 15%;">
					<image v-if="!list.avater" src="https://www.sign.run/applet/static/role/avater.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
					<image v-if="list.avater" :src="list.avater" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				</view>
				<view class="foSi30 coFFF" style="width: 85%;">
					<view>{{list.name}}</view>
					<view class="dis disAl disJuB mar-top20">
						<view>{{list.tel}}</view>
						<view class="dis disAl disJuC borRad20 foSi25 bacFFF" 
							style="width: 100rpx;height: 40rpx;" :style="'color: '+back+';'">{{list.zTrue?'已实名':'未实名'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar bacFFF box1 mar-top40 borRad10" style="height: 150rpx;">
			<view class="dis disAl disJuB hei80 wid90 mar">
				<view>部门</view>
				<image @click="toggle1('bottom')" src="https://www.sign.run/applet/static/staff/genhuan.png" style="width: 130rpx;height: 50rpx;"></image>
			</view>
			<view class="wid90 mar foSi30" style="line-height: 41rpx;">{{list.gs}}</view>
		</view>
		<view class="wid90 mar bacFFF box1 mar-top40 borRad10" style="min-height: 150rpx;">
			<view class="dis disAl disJuB hei80 wid90 mar">
				<view>角色</view>
				<image @click="toggle('bottom')" src="https://www.sign.run/applet/static/staff/fenpei.png" style="width: 130rpx;height: 50rpx;"></image>
			</view>
			<view class="wid90 mar foSi30" style="line-height: 41rpx;">{{list.quanxian}}</view>
			<view style="height: 20rpx;"></view>
		</view>
		<view class="wid90 mar dis mar-top30 foSi25" style="justify-content: flex-end;" :style="'color: '+back+';'">离职此员工</view>
		<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC poRel">
				<view class="poAbs hei80 dis disAl" style="left: 40rpx;">
					<!-- <image src="https://www.sign.run/applet/static/index/guanbi.png"style="width: 30rpx;height: 30rpx;" @click="guanbi"></image> -->
					<uni-icons type="closeempty" size="40rpx" color="#858484" @click="guanbi"></uni-icons>
				</view>
				<view class="foSi35 fowe600" style="">分配角色</view>
			</view>
			<scroll-view scroll-y="true" style="height: 800rpx;">
				<view class="wid90 mar mar-top20" style="">
					<view  v-for="(item,index) in jsList" :key="index">
						<view class="foSi30 hei60 dis disAl mar-bott30">{{item.name}}</view>
						<view v-for="(item1,index1) in item.list" :key="index1">
							<view class="dis disAl hei80 disJuB">
								<view class="dis disAl wid90" @click="checkboxClick(index,index1)">
									<view style="width: 10%;">
										<checkbox class="red" style="transform:scale(0.7)" :checked="item1.checked"></checkbox>
									</view>
									<view>{{item1.name}}</view>
								</view>
								<uni-icons v-if="!item1.tr" @click="zxClick(index,index1)" type="down" size="30rpx" color="#858484"></uni-icons>
								<uni-icons v-if="item1.tr" @click="zxClick(index,index1)" type="up" size="30rpx" color="#858484"></uni-icons>
							</view>
							<view v-if="item1.tr" class="foSi25 mar-top10 dis disAl wid90" style="color: #858484;">
								<view style="width: 10%;"></view>
								<view>{{item1.text}}</view>
							</view>
							<view class="xia mar-top30 mar-bott30"></view>
						</view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
			<view class="wid100 dis disAl" style="height: 125rpx;">
				<view class="wid90 mar dis disAl disJuB foSi35">
					<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+back+';'" @click="guanbi"
						style="width: 300rpx;">取消</view>
					<view class="hei80 dis disAl disJuC coFFF borRad10" :style="'background-color: '+back+';'"
					 style="width: 300rpx;">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" background-color="#fff" :is-mask-click="false">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC poRel">
				<view class="poAbs hei80 dis disAl" style="left: 40rpx;">
					<!-- <image src="https://www.sign.run/applet/static/index/guanbi.png"style="width: 30rpx;height: 30rpx;" @click="guanbi"></image> -->
					<uni-icons type="closeempty" size="40rpx" color="#858484" @click="guanbi1"></uni-icons>
				</view>
				<view class="foSi35 fowe600" style="">更换部门</view>
				<view class="poAbs hei80 dis disAl" @click="queding1"
					style="right: 40rpx;" :style="'color: '+back+';'">确定</view>
			</view>
			<scroll-view scroll-y="true" style="height: 700rpx;">
				<view class="wid80 mar mar-top20">
					<view v-for="(item,index) in bmList" :key="index" @click="bmClick(index)">
						<view class="dis disAl hei80 disJuB">
							<view class="dis disAl wid90" :style="item.tr?'color: '+back+';':''">{{item.name}}</view>
							<uni-icons v-if="item.tr" type="checkmarkempty" size="30rpx" :color="back"></uni-icons>
						</view>
						<view class="xia mar-bott20"></view>
					</view>
				</view>
				<view style="height: 40rpx;"></view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				list: {
					avater: '',
					name: '张三',
					tel: '133****9999',
					zTrue: true,
					gs: '长春市千羽科技有限公司',
					quanxian:'IT信息管理员、企业模、起草合同、合同文件夹、合同文件夹、合同文件夹、合同文件夹、合同文件夹',
				},
				bmList1: [],
				bmList: [
					{name: '长春市千羽科技有限公司',tr: false},
					{name: 'IT部门',tr: true}
				],
				jsList1: [],
				jsList: [
					{
						name: '系统默认角色',
						list: [
							{
								name: 'IT信息管理员',
								text: '组织员工、计费模块、应用模块等权限能力',
								checked: true,
								tr: false
							},
							{
								name: '企业合同管理员',
								text: '组织员工、计费模块、应用模块等权限能力',
								checked: true,
								tr: false
							},
							{
								name: '企业模板管理员',
								text: '组织员工、计费模块、应用模块等权限能力',
								checked: true,
								tr: false
							},
							{
								name: '企业印章管理员',
								text: '组织员工、计费模块、应用模块等权限能力',
								checked: false,
								tr: false
							}
						]
					},
					{
						name: '企业自定义角色',
						list: [
							{
								name: '企业员工',
								text: '应用模块等权限能力',
								checked: false,
								tr: false
							},
						]
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			queding1(){
				this.$refs.popup1.close()
			},
			bmClick(index){
				for (var i=0; i<this.bmList.length; i++) {
					if(index == i){
						this.bmList[i].tr = true
					}else{
						this.bmList[i].tr = false
					}
				}
			},
			queding(){
				this.$refs.popup.close()
			},
			zxClick(index,index1){
				this.jsList[index].list[index1].tr = !this.jsList[index].list[index1].tr
			},
			checkboxClick(index,index1){
				this.jsList[index].list[index1].checked = !this.jsList[index].list[index1].checked
			},
			tiaozhuan(url){
				uni.redirectTo({
					url: url
				});
			},
			toggle1(type) {
				this.bmList1 = JSON.parse(JSON.stringify(this.bmList));
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup1.open(type)
			},
			guanbi1(){
				this.bmList =JSON.parse(JSON.stringify(this.bmList1));
				this.$refs.popup1.close()
			},
			toggle(type) {
				this.jsList1 = JSON.parse(JSON.stringify(this.jsList));
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			guanbi(){
				this.jsList =JSON.parse(JSON.stringify(this.jsList1));
				this.$refs.popup.close()
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F3F3;
	}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #BFBFBF;
	}
	
	checkbox.red[checked] .wx-checkbox-input,
	checkbox.red.checked .uni-checkbox-input{
		background-color: #035DFF !important;
		border-color: #035DFF !important;
		color: #ffffff !important;
	}
</style>
